<template>
  <div class="dc-page-design-left">
    <div class="dc-page-design-l-h">
      <div class="dc-page-design-l-title">
        设计器
      </div>
    </div>
    <el-tabs v-model="currentTab" class="dc-page-design-l-t" stretch>
      <el-tab-pane label="组件" name="comps" />
      <el-tab-pane label="字段" name="field" />
      <el-tab-pane label="布局大纲" name="layout" />
    </el-tabs>

    <!-- 组件和结构树 -->
    <div class="dc-page-design-l-c">
      <el-scrollbar class="dc-page-design-l-s">
        <left-comps v-if="currentTab === 'comps'" />
        <left-field v-else-if="currentTab === 'field'" />
        <left-layout v-else-if="currentTab === 'layout'" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LeftComps from './left/left-comps.vue'
import LeftField from './left/left-field.vue'
import LeftLayout from './left/left-layout.vue'

const props = defineProps({
  activeData: Object
})
const emit = defineEmits(['active-comp', 'copy-comp', 'clone-comp'])
const currentTab = ref('comps')
</script>

<style lang='scss' scoped>
</style>
